<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>文件上传</title>
</head>
<body>
	<form action="Uploadpic" method="post"enctype="multipart/form-data">
		<label ></label><br>
		<img id="headPic" src="" width="150px" height='150px' style="padding: 5px" alt="选择图片">
		<input id="upload" name="file" accept="image/*" type="file" style="display: none"/>
		<button id="submit_btn" type="submit">确定上传</button>
	</form>
</body>
<script src='js/JQ.js'></script>
<script>
$("#headPic").click(function () {
    $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
    $("#upload").on("change",function(){
        var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
        if (objUrl) {
            $("#headPic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
            
        }
    });
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
    url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
</html>